import React from 'react';
import utils from 'utils';
import hljs from 'utils/hl.js';
import MarkdownIt from 'markdown-it';
import { filterXSS } from 'xss';
import intl from '../../../locale';

const md = new MarkdownIt({
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {
        return '';
      }
    }

    return ''; // 使用额外的默认转义
  },
});

export default class CommitCommentInfo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isHover: false,
    };
  }

  render() {
    const { comment } = this.props;
    const { isHover } = this.state;
    const { note, created_at, author } = comment;
    const userName = author ? author.name : '';
    return (
      <div
        className="item-detail"
        onMouseEnter={() => {
          this.setState({
            isHover: true,
          });
        }}
        onMouseLeave={() => {
          this.setState({
            isHover: false,
          });
        }}
      >
        <div className="name-time">
          <div className="user-name">
            <span>{userName}</span>
            <span
              onClick={(e) => {
                e.stopPropagation();
                this.props.replyFn && this.props.replyFn(comment);
              }}
              className="reply-btn"
              style={{ display: isHover ? 'inline-block' : 'none' }}
            >
              {intl.get({
                id: 'code-assets.commitDetail.detail.commentInfo.Response',
                defaultMessage: '回复',
              })}
            </span>
          </div>
          <div className="comment-time">{utils.getBeautyTime(created_at)}</div>
        </div>
        <div
          className="comment-note"
          dangerouslySetInnerHTML={{
            __html: filterXSS(md.render(note || ''), {
              onIgnoreTagAttr: (_, name, value) => {
                return `${name}=${value}`;
              },
            }),
          }}
        />
      </div>
    );
  }
}
